﻿<!DOCTYPE html>
<html lang="zh">
<head>
  <title>时钟显示</title>
  <link rel="stylesheet" href="css/flpclck.css">
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/flpclck.min.js"></script>
</head>

<body>
  <div class="your-clock"></div>
  <div class="message"></div>
  <button class="start">Start Clock</button>
  <button class="stop">Stop Clock</button>
  <button class="change">change Clock</button>


  <br /><a href="https://www.jq22.com/yanshi8168">参照实例</a>
  <script type="text/javascript">
    var ftime = 17 * 60 * 60 + 57 * 60 + 44
    
    var clock = $('.your-clock').FlipClock(ftime, {
      clockFace: 'HourlyCounter',
      autoStart: false
    });

    $('.start').click(function (e) {
      clock.start();
    });

    $('.stop').click(function (e) {
      clock.stop();
    });

   function changeFlip(clock){
        clock = $('.your-clock').FlipClock(43200, {
            clockFace: 'HourlyCounter',
            autoStart: false
        });
    }
    $('.change').click(function (e) {
      clock = $('.your-clock').FlipClock(43200, {
            clockFace: 'HourlyCounter',
            autoStart: false
        });
    });
  </script>
</body>
<!-- <body>
  <div class="your-clock"></div>
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/flpclck.min.js"></script>
  <script>
    // var clock = $('.your-clock').FlipClock({});

    //     var clock = new FlipClock($('.your-clock'), {　　//对应的是(天,时,分,12小时制,24小时制,计数)
    //     clockFace : DailyCounter | HourlyCounter | MinuteCounter | TwelveHourClock | TwentyFourHourClock | Counter
    // });
    //设置时间格式的时钟　
    // var date = new Date();
    // var clock = $('.your-clock').FlipClock(date, {
    //   clockFace: 'TwentyFourHourClock',
    //   autoStart: false,
    // });


    var clock = new FlipClock($('.your-clock'), { //对应的是(天,时,分,12小时制,24小时制,计数)
      clockFace: 'Counter', //计数模式
      autoStart: false, //自动增量
      countdown: true, //倒计时向下
      minimumDigits: 5, //设定位数
    });
  </script>
</body> -->

</html>